<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-05 14:46:45
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2025-01-10 13:44:21
 * @FilePath: \dcy-webd:\webCode\dcyCode\sr_system_manager_ui\src\views\system\user\profile\index.vue
 * @Description: 账户管理
-->

<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'
import formateDate from '@/utils/formateDate'
// import ChangePhone from "./components/ChangePhone.vue"
import useUserStore from '@/store/modules/user'
import { getAccountDetailReq } from '@/api/system/user/index'

const userStore = useUserStore()
const idCareSee = ref(false) // 身份证是否遮挡
// const visible = ref(false) // 变更手机号
const userInfo = ref()

const { run: getAccountDetail } = useRequest(getAccountDetailReq, {
   // false 为自动执行
   manual: true,
   // 请求成功
   onSuccess: (data) => {
      userInfo.value = data
   },
})
getAccountDetail(userStore.id)

// 变更手机号
// function changePhone(){
//    visible.value = true
// }
// function close(){
//    visible.value = false
// }

// 身份证是否遮挡
function maskedIdCard(idCard) {
   if (typeof idCard !== 'string' || idCard.length < 8) {
      return idCard; // 如果身份证号码不是字符串或者长度小于8，直接返回原值
   }
   const start = idCard.slice(0, 6); // 取前6位
   const end = idCard.slice(-4); // 取后4位
   const maskedPart = '*'.repeat(idCard.length - 10); // 中间部分替换为星号
   return start + maskedPart + end;
}
</script>

<template>
   <div class="app-container min-h-[100%]">
      <div class="items">
         <div class="item">
            <span class="label">姓名</span>
            <span class="text">{{ userInfo?.name }}</span>
         </div>
         <div class="item">
            <span class="label">手机号</span>
            <span class="text">{{ userInfo?.phone }}</span>
            <!-- <span class="change-btn" @click="changePhone">变更手机号</span> -->
         </div>
         <div class="item">
            <span class="label">工号</span>
            <span class="text">{{ userInfo?.code }}</span>
         </div>
         <div class="item">
            <span class="label">邮箱</span>
            <span class="text">{{ userInfo?.email }}</span>
         </div>
         <div class="item">
            <span class="label">身份证号</span>
            <span class="text">
               {{ (idCareSee ? userInfo?.idcard : maskedIdCard(userInfo?.idcard)) || '-' }}
               <template v-if="userInfo?.idcard">
                  <i v-if="!idCareSee" class="iconfont icon-iconyinzang icon-see" @click="idCareSee = !idCareSee" />
                  <i v-else class="iconfont icon-iconxianzhi icon-see" @click="idCareSee = !idCareSee" />
               </template>
            </span>
         </div>
         <div class="item">
            <span class="label">角色</span>
            <span class="text">{{ userInfo?.accountRoleList?.map(v => v.roleName).join('，') }}</span>
         </div>
         <div class="item">
            <span class="label">学院（部）</span>
            <span class="text">{{ userInfo?.departmentName }}</span>
         </div>
         <div class="item">
            <span class="label">性别</span>
            <span class="text">{{ userInfo?.sex === 1 ? '男' : userInfo?.sex === 2 ? '女' : ''}}</span>
         </div>
         <div class="item">
            <span class="label">出生日期</span>
            <span class="text">{{ userInfo?.birthday && formateDate(userInfo?.birthday).format('YYYY/MM/DD') || '' }}</span>
         </div>
         <div class="item">
            <span class="label">学历</span>
            <span class="text">{{ userInfo?.educationName }}</span>
         </div>
         <div class="item">
            <span class="label">学位</span>
            <span class="text">{{ userInfo?.academicName }}</span>
         </div>
         <div class="item">
            <span class="label">职称</span>
            <span class="text">{{ userInfo?.title }}</span>
         </div>
         <div class="item">
            <span class="label">岗位类型</span>
            <span class="text">{{ userInfo?.positionType }}</span>
         </div>
         <div class="item">
            <span class="label">岗位级别</span>
            <span class="text">{{ userInfo?.positionLevel }}</span>
         </div>
         <div class="item">
            <span class="label">一级学科</span>
            <span class="text">{{ userInfo?.subject }}</span>
         </div>
         <div class="item">
            <span class="label">所属单位</span>
            <span class="text">{{ userInfo?.organizationName }}</span>
         </div>
         <div class="item !w-full">
            <span class="label">研究方向</span>
            <span class="text">{{ userInfo?.direction }}</span>
         </div>
      </div>

      <!-- 变更手机号 -->
      <!-- <ChangePhone v-if="visible" :visible="visible" @close="close" /> -->
   </div>
</template>

<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.items {
   @apply: flex flex-wrap border border-l-0 border-color-[#BEDAFF];
   .item {
      @apply: flex items-center w-[50%] leading-[21px] text-[#1D2129] border-b border-color-[#BEDAFF];
      &:last-child{
         @apply: border-0;
      }
      .label {
         @apply: inline-block w-[130px] h-[100%] content-center px-[16px] py-[14px] bg-[#F6FAFF] border-r border-l border-color-[#BEDAFF];
      }
      .text{
         @apply: flex-1 px-[16px] py-[14px];
      }
      .change-btn {
         @apply: text-[$--color-primary] ml-[20px] cursor-pointer;
      }

      .icon-see {
         @apply: text-[#C9CDD4] text-[16px] ml-[12px] cursor-pointer;
      }
   }
}
</style>